<template>
  <!-- 联系我们 -->
  <div class="contactUsBox">
    <x-header :left-options="{showBack: true,backText:'联系我们'}" class="headerBox"></x-header>
    <div class="conCard">
      <div class="conTop">服务热线</div>
      <div class="conDispose">注册咨询/软件使用咨询等问题处理</div>
      <div class="conTel">+86 13400000000</div>
      <div class="conFoot">立即拨打</div>
    </div>

    <div class="conCard">
      <div class="conTop">我们的邮箱</div>
      <div class="conDispose">补充资料、投诉与建议、变更账户信息、争议处理等问题处理</div>
      <div class="conTel">123456789@234.com</div>
      <div class="conFoot">复制</div>
    </div>
  </div>
</template>

<script>
import { XHeader, } from "vux";
export default {
  components: {
    XHeader,
  },
  data() {
    return {
    }
  },
}
</script>

<style lang="less" scoped>
.contactUsBox {
  // 头部导航
  /deep/.headerBox {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
  }
  .conCard {
    margin: 45px 50px 50px 45px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    flex-direction: column;
    box-shadow: 0 0 20px #eee;

    .conTop {
      color: #8b82b3;
      padding: 40px;
      font-size: 40px;
    }
    .conDispose {
      font-size: 35px;
      padding: 20px 50px;
    }
    .conTel {
      padding: 20px 0;
    }
    .conFoot {
      color: #fff;
      font-size: 40px;
      background-color: #409eff;
      margin: 40px 0;
      padding: 10px 0px;
      box-sizing: border-box;
      width: 500px;
      text-align: center;
      border-radius: 50px;
    }
  }
}
</style>